<script setup lang="ts">
// 导入子组件 SlotSubComponent，该组件包含默认插槽
import SlotSubComponent from "@/components/SlotSubComponent.vue";

// 定义一个响应式变量（此处虽未用ref/reactive，但作为演示用的字符串）
// 存储父组件要传递给子组件插槽的自定义内容
const message = '这是组件的使用者自定义的内容';
</script>

<template>
    <!-- 父组件自身的内容：显示"父组件------"及message变量的值 -->
    父组件------{{ message }}

    <!-- 水平分隔线，用于视觉区分父组件自身内容和子组件 -->
    <hr>

    <!-- 使用子组件 SlotSubComponent，并向其默认插槽传递内容 -->
    <SlotSubComponent>
        <!--
          注释掉的内容：原本计划向子组件的默认插槽插入包含message的段落
          若取消注释，子组件的默认插槽会显示该段落（替代子组件的默认内容）
          现在注释状态下，子组件会显示自身插槽的默认内容
        -->
        <!-- <p>{{ message }}</p> -->
    </SlotSubComponent>
</template>

<style scoped>
/* 局部样式区域，当前组件无需额外样式 */
</style>